<template>
  <el-container>
    <!-- 左侧导航栏 -->
    <el-aside width="180px" class="sidebar">
      <el-menu :default-active="activeMenu" mode="vertical">
        <el-menu-item index="home" @click="navigateToHome">首页</el-menu-item>
        <el-menu-item index="restaurants" @click="navigateToRestaurants">餐厅</el-menu-item>
        <el-menu-item index="user" @click="navigateToUserProfile">个人信息</el-menu-item>
      </el-menu>
    </el-aside>

    <!-- 主体内容部分 -->
    <el-main>
      <el-card>
        <h2>用户信息</h2>
        <p>用户名: {{ user.name }}</p>
        <p>邮箱: {{ user.email }}</p>

        <h3>收藏的餐厅</h3>
        <el-table :data="user.favorites" border style="width: 100%">
          <el-table-column prop="name" label="餐厅名称" />
          <el-table-column prop="rating" label="评分" />
          <el-table-column label="操作">
            <template #default="scope">
              <el-button type="danger" size="small" @click="removeFromFavorites(scope.row)">
                取消收藏
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <h3>历史操作记录</h3>
        <el-table :data="user.history" border style="width: 100%">
          <el-table-column prop="action" label="操作" />
          <el-table-column prop="date" label="时间" />
        </el-table>
      </el-card>
    </el-main>
  </el-container>
</template>

<script>
import { useRouter, useRoute } from "vue-router";

export default {
  setup() {
    const router = useRouter();
    const route = useRoute();

    // 获取当前路由，根据路由设置导航栏的激活项
    const activeMenu = route.name === 'userProfile' ? 'user' : '';

    // 路由导航方法
    const navigateToHome = () => router.push('/');
    const navigateToRestaurants = () => router.push('/restaurants');
    const navigateToUserProfile = () => router.push('/user');

    return { activeMenu, navigateToHome, navigateToRestaurants, navigateToUserProfile };
  },
  data() {
    return {
      user: {
        name: '刘江龙',
        email: '22111303071@example.com',
        favorites: [
          { name: '安师大·美味小厨', rating: 4.8 },
          { name: '安师大·健康餐馆', rating: 4.6 },
          { name: '安师大·日式料理', rating: 4.7 },
        ],
        history: [
          { action: '收藏了餐厅 安师大·美味小厨', date: '2024-12-01' },
          { action: '评论了餐厅 安师大·健康餐馆', date: '2024-11-30' },
          { action: '查看了餐厅 安师大·日式料理', date: '2024-11-29' },
        ],
      },
    };
  },
  methods: {
    removeFromFavorites(restaurant) {
      this.user.favorites = this.user.favorites.filter(item => item.name !== restaurant.name);
      this.addHistory(`取消收藏了餐厅 ${restaurant.name}`);
    },
    addHistory(action) {
      const currentDate = new Date().toLocaleDateString();
      this.user.history.push({ action, date: currentDate });
    },
  },
};
</script>

<style scoped>
/* 左侧导航栏 */
.sidebar {
  background-color: rgba(255, 255, 255, 0.9); /* 背景色调整 */
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* 修改菜单的样式 */
.el-menu {
  width: 100%;
  font-size: 18px;
}

.el-menu-item {
  color: #333;
}

.el-menu-item:hover {
  background-color: #42b983; /* 鼠标悬停时的颜色 */
}

.el-menu-item.is-active {
  background-color: #388e3c; /* 当前选中的颜色 */
}

/* 页面主体 */
.el-main {
  padding: 20px;
  margin-left: 180px; /* 留出左侧导航栏宽度 */
}

/* 卡片内容的样式 */
.el-card {
  margin-top: 20px;
  padding: 20px;
}

h2 {
  font-size: 24px;
  font-weight: bold;
}

h3 {
  font-size: 20px;
  margin-top: 20px;
  margin-bottom: 10px;
}

p {
  font-size: 18px;
}

.el-table {
  margin-top: 20px;
}

.el-table-column {
  text-align: center;
}

.el-button {
  width: 100%;
}
</style>
